import React, { ReactElement, useEffect, useState } from 'react'
import { Button, Row, Input, Card, Tag, Col, Select } from 'antd'
import { useModel, connect } from 'umi'
import { getRestHeros } from '@/api/hero'
import styles from './HeroCard.less'

const { Option } = Select;
const { TextArea } = Input;

interface Props {
    heroCard: any,
    addCard: Function,
    com: string,
    delCard: Function,
    setCard: Function
}


function HeroCard({ heroCard, addCard, delCard, com, setCard }: Props): ReactElement {
    const [list, setList] = useState([])

    // 确实_id
    function handleChange(value: string, index: number) {
        setCard(com, index, value, 'hero')
    }

    useEffect(() => {
        getRestHeros().then((res: any) => {
            setList(res)
        })
    }, [])
    return (
        <div>
            <Button className={styles.mb15} onClick={() => {
                addCard(com)
            }}  type="primary"> + 添加英雄</Button>
            <Row>
                {
                    heroCard[com].map((item: any, index: any) => {
                        return <Col key = { index } span={12}>
                            <Card title={<Tag color="processing">英雄{ index + 1 }</Tag>}>
                                <div className={styles.flex}>
                                    <span>
                                        英雄名称:
                                    </span>
                                    <div>
                                        <Select style={{ width: 120 }} onChange={(value) => {
                                            handleChange(value, index)
                                        }}>
                                            {
                                                list.map((item: any) => {
                                                    return <Option key={item._id} value={item._id}>
                                                        {item.name}
                                                    </Option>
                                                })
                                            }
                                        </Select>
                                    </div>
                                </div>
                                <div className={styles.flex}>
                                    <span>
                                        描述:
                                    </span>
                                    <div>
                                        <TextArea onChange={(ev) => {
                                            const value = ev.target.value
                                            setCard(com, index, value, 'desc')
                                        }} />
                                    </div>
                                </div>
                                <div className={styles.flex}>
                                    <span>
                                        <Button onClick={() => {
                                            delCard(com, index)
                                        }} type="primary" danger>删除</Button>
                                    </span>
                                </div>
                            </Card>
                        </Col>
                    })
                }
            </Row>
        </div>
    )
}

export default connect((state: any) => {
    const { heroCard } = state
    return {
        heroCard
    }
}, (dispatch) => {
    return {
        addCard(com: string) {
            dispatch({ type: "heroCard/addCard", com })
        },
        delCard(com: string, index: number) {
            dispatch({ type: "heroCard/delCard", com, index }) 
        },
        setCard(com: string, index: number, value: string, heroType: string) {
            dispatch({ type: "heroCard/setCard", com, index, value, heroType }) 
        }
    }
})(HeroCard)

